<h1 class="page-header">{{data.title}}</h1>
<div class="row placeholders">

    <!-- 电影列表 -->
    <div class="list-group">
        <a href="#" class="list-group-item" ng-repeat="item in data.subjects">
            <div class="media">
                <div class="media-left" href="#">
                    <img ng-src="{{item.images.medium}}">
                </div>
                <div class="media-body">
                    <span class="badge pull-right ng-binding">{{item.rating.average}}</span>
                    <h2 class="media-heading ng-binding">{{item.title}}</h2>
                    <p>类型：<span class="ng-binding">{{item.genres.join("、")}}</span>&nbsp;&nbsp;&nbsp;&nbsp;上映年份：<span class="ng-binding">{{item.year}}</span></p>
                    <p>导演：<span ng-repeat="item2 in item.directors">{{item2.name}}&nbsp;&nbsp;</span></p>
                    <p>主演：<span ng-repeat="item3 in item.casts">{{item3.name}}&nbsp;&nbsp;</span></p>
                </div>
            </div>
        </a>
    </div>

    <!-- 底部信息&页面切换按钮 -->
    <span >总共：{{data.total}}条记录，第{{page}}/{{totalPage}}页</span>
    <nav>
        <ul class="pager">
            <li ng-class="{disabled:page<=1?true:false}"><a href="javascript:;" ng-click="previous()">Previous</a></li>
            <li ng-class="{disabled:page>=totalPage?true:false}"><a href="javascript:;" ng-click="next()">Next</a></li>
        </ul>
    </nav>

    <!--loading部分 -->
    <div class="loading" ng-show="loading">
        <div class="spinner">
            <div class="spinner-container container1">
                <div class="circle1"></div>
                <div class="circle2"></div>
                <div class="circle3"></div>
                <div class="circle4"></div>
            </div>
            <div class="spinner-container container2">
                <div class="circle1"></div>
                <div class="circle2"></div>
                <div class="circle3"></div>
                <div class="circle4"></div>
            </div>
            <div class="spinner-container container3">
                <div class="circle1"></div>
                <div class="circle2"></div>
                <div class="circle3"></div>
                <div class="circle4"></div>
            </div>
        </div>
    </div>

</div>
